<template>
   <div>
      <div class="search-div" style="margin-bottom: 10px;">
         <el-form label-width="70px" size="small">
            <el-row>
               <el-col :span="8">
                  <el-form-item label="关 键 字">
                     <el-input style="width: 95%" v-model="searchObj.keyword" placeholder="用户名"></el-input>
                  </el-form-item>
               </el-col>
               <el-col :span="8">
                  <el-form-item label="操作时间">
                     <el-date-picker v-model="createTimes" type="datetimerange" range-separator="至"
                        start-placeholder="开始时间" end-placeholder="结束时间" value-format="yyyy-MM-dd HH:mm:ss"
                        style="margin-right: 10px;width: 100%;" />
                  </el-form-item>
               </el-col>
            </el-row>
            <el-row style="display:flex">
               <el-button type="primary" icon="el-icon-search" size="mini" @click="fetchData()">搜索</el-button>
               <el-button icon="el-icon-refresh" size="mini" @click="resetData">重置</el-button>
            </el-row>
         </el-form>
      </div>
      <!-- 工具条 -->
      <div class="tools-div">
         <el-button type="success" icon="el-icon-plus" size="mini" :disabled="$hasBP('bnt.user.add') === false"
            @click="dialogVisible = true">添 加</el-button>
      </div>
      <el-dialog title="添加/修改" :visible.sync="dialogVisible" width="40%">
         <el-form ref="sysUser" :model="sysUser" label-width="100px" size="small" style="padding-right: 40px;">
            <el-form-item label="用户名" prop="username" :rules="{ required: true, message: '用户名不能为空', trigger: 'blur' }">
               <el-input v-model="sysUser.username" @blur="CheckName(sysUser.username)" />

            </el-form-item>
            <el-form-item v-if="!sysUser.id" label="密码" prop="password" :rules="[
                  { required: true, message: '密码不能为空', trigger: 'blur' },
                  {
                     pattern: /^([0-9a-zA-Z]{6})$/,
                     message: '密码长度为6，且只能使用字母，数字',
                     trigger: 'blur',
                  },
               ]">
               <el-input v-model="sysUser.password" type="password" />
            </el-form-item>

         </el-form>
         <span slot="footer" class="dialog-footer">
            <el-button @click="CloseDialog" size="small" icon="el-icon-refresh-right">取 消</el-button>
            <el-button type="primary" icon="el-icon-check" @click="saveOrUpdate()" size="small">确 定</el-button>
         </span>
      </el-dialog>

      <el-dialog title="分配角色" :visible.sync="dialogRoleVisible">
         <el-form label-width="80px">
            <el-form-item label="用户名">
               <el-input disabled :value="sysUser.username"></el-input>
            </el-form-item>

            <el-form-item label="角色列表">
               <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll"
                  @change="handleCheckAllChange">全选</el-checkbox>
               <div style="margin: 15px 0;"></div>
               <el-checkbox-group v-model="userRoleIds" @change="handleCheckedChange">
                  <el-checkbox v-for="role in allRoles" :key="role.id" :label="role.id">{{ role.roleName
                     }}</el-checkbox>
               </el-checkbox-group>
            </el-form-item>
         </el-form>
         <div slot="footer">
            <el-button type="primary" @click="assignRole" size="small">保存</el-button>
            <el-button @click="dialogRoleVisible = false" size="small">取消</el-button>
         </div>
      </el-dialog>
      <div class="app-container">
         <!-- 列表 -->
         <el-table v-loading="listLoading" :data="list" stripe border style="width: 100%;margin-top: 10px;">

            <el-table-column label="序号" width="70" align="center">
               <template slot-scope="scope">
                  {{ (page - 1) * limit + scope.$index + 1 }}
               </template>
            </el-table-column>
            <el-table-column prop="username" label="用户名" width="180" />
            <el-table-column label="状态" width="80">
               <template slot-scope="scope">
                  <el-switch v-model="scope.row.activated === 1" :disabled="$hasBP('bnt.user.update') === false"
                     @change="switchStatus(scope.row)">
                  </el-switch>
               </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" />
            <el-table-column prop="updateTime" label="修改时间" />

            <el-table-column label="操作" align="center" fixed="right">
               <template slot-scope="scope">
                  <el-button type="primary" icon="el-icon-edit" :disabled="$hasBP('bnt.user.update') === false"
                     size="mini" @click="edit(scope.row.id)" title="修改" />
                  <el-button type="danger" icon="el-icon-delete" :disabled="$hasBP('bnt.user.remove') === false || scope.row.id===1 ? true : false"
                     size="mini" @click="removeDataById(scope.row.id)" title="删除" />
                  <el-button type="warning" icon="el-icon-baseball" :disabled="$hasBP('bnt.user.assignRole') === false"
                     size="mini" @click="showAssignRole(scope.row)" title="分配角色" />
               </template>
            </el-table-column>
         </el-table>
         <!-- 分页组件 -->
         <el-pagination :current-page="page" :total="total" :page-size="limit"
            style="padding: 30px 0; text-align: center;" layout="total, prev, pager, next, jumper"
            @current-change="fetchData" />

      </div>
   </div>
</template>
<script>

import api from '@/api/user/user.js'
import roleApi from '@/api/role/role.js'
const defaultForm = {
   id: '',
   username: '',
   password: '',
   name: '',
   activated: 1
}
export default {
   data() {
      return {
         listLoading: true, // 数据是否正在加载
         list: null, // banner列表
         total: 0, // 数据库中的总记录数
         page: 1, // 默认页码
         limit: 5, // 每页记录数
         searchObj: {}, // 查询表单对象

         createTimes: [],

         dialogVisible: false,
         sysUser: defaultForm,
         saveBtnDisabled: false,

         dialogRoleVisible: false,
         allRoles: [], // 所有角色列表
         userRoleIds: [], // 用户的角色ID的列表
         isIndeterminate: false, // 是否是不确定的
         checkAll: false // 是否全选
      }
   },
   created() {
      this.fetchData();
   },
   methods: {
      fetchData(page = 1) {
         this.page = page;
         if (this.createTimes && this.createTimes.length == 2) {
            this.searchObj.createTimeBegin = this.createTimes[0];
            this.searchObj.createTimeEnd = this.createTimes[1];
         }

         api.getUserPageInfo(this.page, this.limit, this.searchObj).then(
            response => {
               //this.list = response.data.list
               this.list = response.data.records;
               this.total = response.data.total;
               // 数据加载并绑定成功
               this.listLoading = false;
            }
         )
      },
      resetData() {
         // 1.清空条件搜索
         this.searchObj = {};
         //2.清空日期条件
         this.createTimes = [];
         //3.刷新数据列表
         this.fetchData();
      },

      edit(id) {
         //a.根据id去得到当前用户 
         api.getUserById(id).then(response => {
            //b.将数据赋值给 sysUser
            this.sysUser = response.data;
            //c.打开弹框
            this.dialogVisible = true;
         })
      },
      CheckName(name) {
         if (name === "") {
            return;
         }
         //id为null，新增
         if (this.sysUser.id === "") {
            api.selectByName(name).then((response) => {

               if (response.data !== "") {
                  this.$message.error(response.data);
               }
            });
         }
      },
      saveOrUpdate() {
         this.$refs.sysUser.validate((valid) => {
            if (valid) {
               api.saveOrUpdate(this.sysUser)
                  .then((response) => {
                     // 提示
                     this.$message({
                        type: "success",
                        message: "保存成功!",
                     });
                     this.sysUser = {};
                     this.dialogVisible = false;
                     // 刷新页面
                     this.fetchData(this.page);

                  });
            }
         })

      },
      CloseDialog() {
         this.sysUser = {};
         this.dialogVisible = false
      },
      // 根据id删除数据
      removeDataById(id) {
         this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
         }).then(() => {
            api.removeUserById(id)
               .then((response) => {
                  // 提示
                  this.$message({
                     type: "success",
                     message: "删除成功!",
                  });
                  // 刷新页面
                  this.fetchData(this.page);
               });
         });
      },
      // 修改状态
      switchStatus(row) {
         // 如果 可用  设置为 不可用  如果不可用  设置为 可用
         row.activated = row.activated === 1 ? 0 : 1;
         api.updateStatus(row.id, row.activated).then(response => {
            //a.给出提示
            this.$message.success(response.message || '操作成功');
            //b.再次刷新列表
            this.fetchData();
         })
      },

      //展示分配角色
      showAssignRole(row) {
         this.sysUser = row
         this.dialogRoleVisible = true
         roleApi.getRolesByUserId(row.id).then(response => {
            this.allRoles = response.data.allRoles
            this.userRoleIds = response.data.userRoleIds
            this.checkAll = this.userRoleIds.length === this.allRoles.length
            this.isIndeterminate = this.userRoleIds.length > 0 && this.userRoleIds.length < this.allRoles.length
         })
      },

      /*
      全选勾选状态发生改变的监听
      */
      handleCheckAllChange(value) {// value 当前勾选状态true/false
         // 如果当前全选, userRoleIds就是所有角色id的数组, 否则是空数组
         this.userRoleIds = value ? this.allRoles.map(item => item.id) : []
         // 如果当前不是全选也不全不选时, 指定为false
         this.isIndeterminate = false
      },

      /*
      角色列表选中项发生改变的监听
      */
      handleCheckedChange(value) {
         const { userRoleIds, allRoles } = this
         this.checkAll = userRoleIds.length === allRoles.length && allRoles.length > 0
         this.isIndeterminate = userRoleIds.length > 0 && userRoleIds.length < allRoles.length
      },

      //分配角色
      assignRole() {
         let assginRoleVo = {
            userId: this.sysUser.id,
            roleIdList: this.userRoleIds
         }
         roleApi.assignRoles(assginRoleVo).then(response => {
            this.$message.success(response.message || '分配角色成功')
            this.dialogRoleVisible = false
            this.fetchData(this.page)
         })
      },
   }
}
</script>